<template>
  <div class="propety-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input placeholder="请输入内容" clearable class="search-main" @clear="getList" v-model="params.enterpriseName"
        size="small" />
      <div class="search-label">缴费时间：</div>

      <el-date-picker value-format="yyyy-MM-dd" v-model="form.propertyTime" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" style="margin-right: 10px; width: auto; height: 33px;">
      </el-date-picker>

      <el-button type="primary" @click="getList" size="small">查询</el-button>
    </div>
    <div class="btn">
      <el-button type="primary" @click="addproperty" size="small">添加账单</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="propertyList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="账单编号" width="180" prop="billNumber" />
        <el-table-column label="企业名称" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" width="120" prop="buildingName" />
        <el-table-column label="物业费(元/m²)" width="120" prop="propertyFeePrice" />
        <el-table-column label="账单金额(元)" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="createTime" />
        <el-table-column label="操作">
          <template #default="scope">
            <!-- <template> -->
            <el-button size="mini" type="text" @click="show(scope.row.id)">查看</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[2, 4, 6, 8, 10]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 添加区域 -->
    <div class="add-container">
      <el-dialog :visible="flag" @close="cancel" :title="form.id ? '编辑账单' : '添加账单'">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="选择租户" prop="enterpriseId">
            <el-select style="width: 70%;" v-model="form.enterpriseId" placeholder="请选择" @change="getpropertyfee"
              size="small">
              <el-option v-for="item in allenterpriseList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select style="width: 70%;" v-model="form.buildingId" placeholder="请选择" size="small">
              <el-option v-for="item in allbuildingList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费周期" prop="propertyTime">
            <el-date-picker v-model="form.propertyTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="getpropertyfee" style="width:70%" size="small">
            </el-date-picker>
            <!-- <el-input v-model="form.area"></el-input> -->

          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input style="width: 70%;" v-model="form.paymentAmount" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod" style="width: 70%;" size="small">
              <el-option label="支付宝" value="2"></el-option>
              <el-option label="微信" value="1"></el-option>
              <el-option label="现金" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add" size="small">确定</el-button>
            <el-button type="primary" @click="cancel" size="small">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 查看账单 -->
    <div class="show-container">
      <el-dialog :visible="flag1" @close="flag1=false" title="查看账单">
        <el-form :model="form2" class="form-container">
          <el-form-item label="租户名称：">
            <div>{{ form2.enterpriseName }}</div>
          </el-form-item>
          <el-form-item label="租赁楼宇：">
            <div>{{ form2.buildingName }}</div>
          </el-form-item>
          <el-form-item label="缴费周期：">
            <div>{{ form2.startTime }} 至 {{ form2.endTime }}</div>
          </el-form-item>
          <el-form-item label="物业费(元/m²)：">
            <div>{{ form2.propertyFeePrice }}</div>
          </el-form-item>
          <el-form-item label="账单金额(元)：">
            <div>{{ form2.paymentAmount }}</div>
          </el-form-item>
          <el-form-item label="支付方式：">
            <div>{{ form2.paymentMethod }}</div>
          </el-form-item>
          <el-form-item label="缴费时间：">
            <div>{{ form2.createTime }}</div>
          </el-form-item>
          <el-form-item  style="text-align: center;">
            <el-button size="small" @click="flag1=false">取消</el-button>
            <el-button type="primary" size="small" @click="flag1=false">确定</el-button>
          </el-form-item>
        </el-form>
        
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getpropertyListAPI,showpropertyfeeAPI, editepropertyfeeAPI, getpropertyfeeAPI, addpropertyAPI, getallenterpriseListAPI, getallbuildingListAPI, delpropertyfeeAPI } from '@/api/propety'
export default {
  // name: 'Building'
  data() {
    return {
      isDisabled: true,
      flag: false,
      flag1:false,
      total: 0,
      // 列表数组
      propertyList: [],
      // 所有租户数组
      allenterpriseList: [],
      allbuildingList: [],
      params: {
        enterpriseName: '',
        start: '',
        end: '',
        page: 1,
        pageSize: 4
      },
      form: {
        enterpriseId: '',
        buildingId: '',
        propertyTime: '',
        paymentAmount: '',
        paymentMethod: '',
      },
      form2: {
        enterpriseName: '',
        buildingName: '',
        startTime: '',
        endTime: '',
        propertyFeePrice: '',
        paymentAmount: '',
        paymentMethod: '',
        createTime: ''
      },
      rules: {
        enterpriseId: [
          { required: true, message: '租户不能为空', trigger: 'blur' },
        ],
        buildingId: [
          { required: true, message: '租赁楼宇不能为空', trigger: 'blur' },
        ],
        propertyTime: [
          { required: true, message: '租期不能为空', trigger: 'blur' },
        ],
        paymentAmount: [
          { required: true, message: '支付金额不能为空', trigger: 'blur' },
        ],
        paymentMethod: [
          { required: true, message: '付款方式不能为空', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    // 查看账单
    async show(id) {
      const row = await showpropertyfeeAPI(id)
      this.flag1 = true,
      this.form2.enterpriseName = row.data.enterpriseName
      this.form2.buildingName= row.data.buildingName
      this.form2.startTime= row.data.startTime
      this.form2.endTime= row.data.endTime
      this.form2.propertyFeePrice= row.data.propertyFeePrice
      this.form2.paymentAmount= row.data.paymentAmount
      this.form2.paymentMethod= row.data.paymentMethodValue
      this.form2.createTime= row.data.createTime
    },
    // 编辑 接口不对劲???
    // edite(row) {
    //     this.form.id = row.id,
    //     this.form.buildingName = row.buildingName,
    //     this.form.enterpriseName = row.enterpriseName,
    //     this.form.enterpriseId = row.id,
    //     this.form.buildingId = row.buildingId,
    //     this.form.propertyTime = [row.startTime, row.endTime]
    //     this.form.paymentAmount = row.paymentAmount,
    //     this.form.paymentMethod = row.paymentMethod,
    //     this.addproperty()
    //     // this.flag = true
    //   console.log(row)
    // },

    // 获取预算金额
    async getpropertyfee() {
      if (this.form.buildingId && this.form.propertyTime) {
        const data = {
          buildingId: this.form.buildingId,
          startTime: this.form.propertyTime[0],
          endTime: this.form.propertyTime[1]
        }
        const res = await getpropertyfeeAPI(data)
        this.form.paymentAmount = res.data
      }
    },
    // 取消按钮
    cancel() {
      this.flag = false
      this.clear()
    },
    clear() {
      this.form = {
        enterpriseId: '',
        buildingId: '',
        // startTime: '',
        // endTime: '',
        propertyTime: '',
        paymentAmount: '',
        paymentMethod: '',
      }
    },
    // 删除
    del(id) {
      this.$confirm('你确定要删除吗？').then(async () => {
        await delpropertyfeeAPI(id)
        this.$message.success('删除成功!')
        this.getList()
      })
    },
    // 获取所有可租借楼宇
    async getallbuildingList() {
      const res = await getallbuildingListAPI()
      // console.log(res)
      this.allbuildingList = res.data
    },
    // 获取租户下拉列表
    async getallenterpriseList() {
      const res = await getallenterpriseListAPI()
      // console.log(res)
      this.allenterpriseList = res.data
    },
    // 添加按钮响应，弹出框
    addproperty() {
      this.getallenterpriseList()
      this.getallbuildingList()
      this.flag = true
    },
    // 确定添加
    add() {
      this.$refs.form.validate(async (ok) => {
        // console.log('dao')
        if (ok) {
          // 编辑
          // if (this.form.id) {
          //   // console.log(this.form)
          //   // console.log('编辑中')
          //   const res = {
          //     id: this.form.id,
          //     enterpriseId: this.form.enterpriseId,
          //     buildingId: this.form.buildingId,
          //     startTime: this.form.propertyTime[0],
          //     endTime: this.form.propertyTime[1],
          //     paymentAmount: this.form.paymentAmount,
          //     paymentMethod: this.form.paymentMethod
          //   }
          //   console.log(res)
          //   await editepropertyfeeAPI(res)
          //   this.flag = false
          //   this.getList()
          //   this.$message.success('编辑成功!')
          // } else {
          // 添加
          const res = {
            enterpriseId: this.form.enterpriseId,
            buildingId: this.form.buildingId,
            startTime: this.form.propertyTime[0],
            endTime: this.form.propertyTime[1],
            paymentAmount: this.form.paymentAmount,
            paymentMethod: this.form.paymentMethod,
          }
          await addpropertyAPI(res)
          this.clear()
          this.getList()
          this.flag = false
          this.$message.success('添加成功!')
          // }
        }
      })

    },
    async getList() {
      this.params.start=''
        this.params.end=''
      if(this.form.propertyTime!=null){
        this.params.start=this.form.propertyTime[0]
        this.params.end=this.form.propertyTime[1]
      }
      const res = await getpropertyListAPI(this.params)
      // console.log(res)
      this.propertyList = res.data.rows
      this.total = res.data.total
      // console.log(this.propertyList)
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.getList()
    }
  },
  mounted() {
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.form-container{
  // padding: 70px;
  margin-left: 100px;
  padding-top: 0%;
  padding-bottom: 0%;
}
.el-form-item {
    margin-bottom: 10px; // 你可以根据需要调整间距大小
  }
.btn {
  margin: 10px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 90px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>